<!-- 
@name: 登录页
-->
<template>
	<div>
		<div id="precedure" v-if="!$store.state.oldPage" class="page">
			<div class="center">
				<input class="input" type="text" v-model="searchData.content" placeholder="请输入搜索关键字..." />
				<img class="icon1" src="@/assets/images/nonPublicEconomy/ss.png" />
				<div class="button" @click="onSearch">搜索</div>
			</div>
			<div class="flex-between flex-alignCenter">

				<div class="wrap flex-row flex-alignCenter" style="padding: 0">

					<div class="text1" @click="show = true">{{date?date:'时间 >'}}</div>
					<van-calendar v-model="show" type="range" :min-date="minDate" :max-date="maxDate" :show-confirm="false" @confirm="onConfirm" />
					<div class="text1" @click="showPickerFN(1)">{{searchData.verifyStateName?searchData.verifyStateName:'责任单位 >'}}</div>

					<van-popup v-model="showPicker" round position="bottom">
						<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="statusOnConfirm" />
					</van-popup>
				</div>
				<van-button type="info" style="border-radius:20px" @click="clearSearch">重置排序</van-button>
			</div>
			<div class="bottom">
				<div class="list">
					<div class="item" v-for="item in taskList">
						<div style="font-size:0.28rem">{{item.taskRecordName}}</div>
						<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
							<div class="f1">{{item.occurrenceTime}}</div>
							<div class="f2" v-if="item.handleStatus!=2">需办理{{item.nextProcessStatusName}}手续</div>
							<div class="f2" v-if="item.handleStatus==2"> 处置完成</div>
							<img class="right" @click="detail_issue_wxh5(item.id)" src="@/assets/images/new/right.png" />
						</div>
					</div>

				</div>
			</div>
			<van-overlay :show="show2">
				<div class="wrapper" @click="show2 = false">
					<div class="block" @click.stop>
						<div class="f3">问题详情</div>
						<div class="block3" style="margin-bottom: 0.2rem;">
							<div class="flex-between flex-alignCenter item">
								<div class="f1">设施名称</div>
								<div class="f2">{{data2.deviceName}}</div>
							</div>
							<div class="flex-between flex-alignCenter item">
								<div class="f1">发生时间</div>
								<div class="f2">{{data2.occurrenceTime}}</div>
							</div>
							<div class="flex-between flex-alignCenter item">
								<div class="f1">发生地点</div>
								<div class="f2">{{data2.sewageFacilityAddress}}</div>
							</div>
							<div class="flex-between flex-alignCenter item">
								<div class="f1">问题类型</div>
								<div class="f2">{{data2.issueType}}</div>
							</div>
							<div class="flex-between flex-alignCenter item">
								<div class="f1">责任单位</div>
								<div class="f2">{{data2.responsibleDeptName}}</div>
							</div>
							<div class="flex-between flex-alignCenter item">
								<div class="f1">处理方式</div>
								<div class="f2">{{data2.handleMethod==1?'人工智能处置':data2.handleMethod==2?'三级治理中心':'施工队'}}</div>
								<!-- 1：人工智能处置 2：三级治理中心 3：施工队 -->
							</div>
							<div class="flex-between flex-alignCenter item">
								<div class="f1">情况反馈</div>
								<div class="f2">{{''}}</div>
							</div>

						</div>
						<di class="f1">施工单位进场开工证明材料详情</di>
						<div class="block4">
							{{'暂无材料'}}
						</div>
						<div class="flex-row flex-center" style="margin:0.4rem 0" v-if="data2.processStatus == 1">
							<div class="button1" @click="showPickerFN(2)">分配责任单位</div>
						</div>

						<div class="flex-row flex-center" style="margin:0.4rem 0" v-if="data2.processStatus == 4&&data2.issueLevel==1">
							<div>
								<div class="button3" @click="downloadApprovedFile_issue_wxh5">批复材料下载</div>

								<van-uploader v-model="this.fileUrls2" max-count='1' :after-read="afterRead2">
									<div class="button3">上传审批材料
									</div>
								</van-uploader>
							</div>
						</div>
						<div class="flex-row flex-center" style="margin:0.4rem 0" v-if="data2.processStatus == 3">
							<div>

								<van-uploader v-model="this.fileUrls2" max-count='1' :after-read="afterRead">
									<div class="button3">上传开工证明
									</div>
								</van-uploader>
							</div>
						</div>
						<div class="flex-row flex-center" style="margin:0.4rem 0" v-if="data2.processStatus == 6">
							<div>

								<van-uploader v-model="this.fileUrls3" max-count='1' :after-read="afterRead3">
									<div class="button3">方案申报
									</div>
								</van-uploader>
							</div>
						</div>

					</div>
				</div>
			</van-overlay>

		</div>
		<bottomTabs></bottomTabs>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import MyOverlay from '@/components/map//MyOverlay.vue';
import bottomTabs from '@/components/global/bottomTabs_wxh5';
import Qs from 'qs'; //引入qs  时axios的自带模块
var codeSetTime;
export default {
	name: 'app',
	components: {
		bottomTabs,
		MyOverlay,
	},
	data() {
		return {
			showPicker2: false,
			deptId: '',
			show2: false,
			showPickerType: 1,
			minDate: new Date(2021, 1, 1),
			maxDate: new Date(2030, 12, 31),
			columns: [],
			date: '',
			fileUrls: [],
			fileUrls2: [],
			fileUrls3: [],
			show: false,
			showPicker: false,
			searchData: {},
			data2: {},
			mapList: [],
			deptList: [],
			constructionUnitList: [],
			taskList: [],
			countList: {},
		};
	},

	created() {
		this.list_issue_wxh5();
		this.list_dept();
		// this.list_constructionUnit();
	},
	methods: {
		downloadApprovedFile_issue_wxh5() {
			var params = { id: this.data2.id };
			this.$myApi.downloadApprovedFile_issue_wxh5(params).then((res) => {
				if (res.code == 200) {
				} else {
				}
			});
		},
		afterRead3(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
			let params = new FormData();
			params.append('file', file.file);
			this.$myApi.upload(params).then((res) => {
				if (res.code == 200) {
					this.fileUrls3 = res.data.fileName;
					this.uploadDesignPlanFile_issue_wxh5();
				} else {
				}
			});
		},
		afterRead2(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
			let params = new FormData();
			params.append('file', file.file);
			this.$myApi.upload(params).then((res) => {
				if (res.code == 200) {
					this.fileUrls2 = res.data.fileName;
					this.uploadApprovedFile_issue_wxh5();
				} else {
				}
			});
		},
		afterRead(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
			let params = new FormData();
			params.append('file', file.file);
			this.$myApi.upload(params).then((res) => {
				if (res.code == 200) {
					this.fileUrls = res.data.fileName;
					this.uploadStartFile_issue_wxh5();
				} else {
				}
			});
		},
		uploadDesignPlanFile_issue_wxh5(id) {
			var params = {
				fileUrls: this.fileUrls2,
				id: this.data2.id,
			};
			this.$myApi.uploadDesignPlanFile_issue_wxh5(params).then((res) => {
				if (res.code == 200) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.show2 = false;
					this.list_issue_wxh5();
				} else {
				}
			});
		},
		uploadApprovedFile_issue_wxh5(id) {
			var params = {
				fileUrls: this.fileUrls2,
				id: this.data2.id,
			};
			this.$myApi.uploadApprovedFile_issue_wxh5(params).then((res) => {
				if (res.code == 200) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.show2 = false;
					this.list_issue_wxh5();
				} else {
				}
			});
		},
		uploadStartFile_issue_wxh5(id) {
			var params = {
				fileUrls: this.fileUrls,
				id: this.data2.id,
			};
			this.$myApi.uploadStartFile_issue_wxh5(params).then((res) => {
				if (res.code == 200) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.show2 = false;
					this.list_issue_wxh5();
				} else {
				}
			});
		},
		showPickerFN(type) {
			this.showPickerType = type;
			this.showPicker = true;
		},
		clearSearch() {
			this.searchData = {};
			this.onSearch();
		},
		detail_issue_wxh5(id) {
			var params = { id: this.$route.query.id };
			this.$myApi.detail_issue_wxh5(id).then((res) => {
				if (res.code == 200) {
					this.data2 = res.data;
					this.show2 = true;
				} else {
				}
			});
		},
		remindConstructionUnit_issue_wxh5(id) {
			var params = {
				constructionUnitId: this.constructionUnitId,
				id: this.data2.id,
			};
			this.$myApi
				.remindConstructionUnit_issue_wxh5(params)
				.then((res) => {
					if (res.code == 200) {
						this.data2 = res.data;
						this.show2 = true;
					} else {
					}
				});
		},
		assignConstructionUnit_issue_wxh5(id) {
			var params = {
				constructionUnitId: this.constructionUnitId,
				id: this.data2.id,
			};
			this.$myApi
				.assignConstructionUnit_issue_wxh5(params)
				.then((res) => {
					if (res.code == 200) {
						this.$notify({ type: 'success', message: '操作成功' });
						this.show2 = false;
						this.list_issue_wxh5();
					} else {
					}
				});
		},

		formatDate(date) {
			//  new Date().getFullYear
			return `${date.getFullYear()}-${
				date.getMonth() + 1
			}-${date.getDate()}`;
		},
		onConfirm(date) {
			const [start, end] = date;
			this.show = false;

			this.searchData.occurrenceTimes =
				this.formatDate(start) + ',' + this.formatDate(end);
			this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
			this.onSearch();
		},
		statusOnConfirm2(value, index) {
			this.constructionUnitId = value.id;
			this.assignConstructionUnit_issue_wxh5();
			this.showPicker2 = false;
		},
		statusOnConfirm(value, index) {
			console.log(`当前值：${value}, 当前索引：${index}`);
			if (this.showPickerType == 1) {
				this.searchData.responsibleDeptId = value.id;
				this.onSearch();
			} else {
				this.deptId = value.id;
				this.assignResponsibleDept_issue_wxh5();
			}
			this.showPicker = false;
		},
		assignResponsibleDept_issue_wxh5() {
			var params = {
				deptId: this.deptId,
				id: this.data2.id,
			};

			this.$myApi.assignResponsibleDept_issue_wxh5(params).then((res) => {
				if (res.code == 200) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.show2 = false;
					this.list_issue_wxh5();
				} else {
				}
			});
		},
		onSearch() {
			this.list_issue_wxh5(true);
			// this.finished = true;
			// this.clearSearchData();
			//   this.$refs.listWrap.top = 0;
			// setTimeout(() => {});
		},
		buttonIndexFn(buttonIndex) {
			this.buttonIndex = buttonIndex;
			this.list_issue_wxh5();
		},
		count_taskRecordAssignment() {
			var params = {};
			this.$myApi.count_taskRecordAssignment(params).then((res) => {
				if (res.code == 200) {
					this.countList = res.data;
				} else {
				}
			});
		},
		list_issue_wxh5() {
			var params = this.searchData;
			this.$myApi.list_issue_wxh5(params).then((res) => {
				if (res.code == 200) {
					this.taskList = res.rows;
				} else {
				}
			});
		},
		list_constructionUnit() {
			var params = {};
			this.$myApi.list_constructionUnit(params).then((res) => {
				if (res.code == 200) {
					var arr = [];
					res.rows.forEach((element) => {
						arr.push({
							text: element.name,
							id: element.id,
						});
					});
					this.constructionUnitList = arr;
				} else {
				}
			});
		},
		list_dept() {
			var params = {
				latitude: this.$store.state.lat,
				longitude: this.$store.state.lng,
			};
			this.$myApi.list_dept(params).then((res) => {
				if (res.code == 200) {
					this.deptList = res.rows;
					var arr = [];
					res.rows.forEach((element) => {
						arr.push({
							text: element.deptName,
							id: element.id,
						});
					});
					this.columns = arr;
				} else {
				}
			});
		},

		refTo() {
			window.location.href = 'https://vr.cvr720.com/2111/zydhze/';
		},
		jump(path) {
			this.$router.push(path);
		},
		mapReady(locationData) {
			return;
			console.log('locationData', locationData);
			let self = this;
			var map = new BMap.Map('allmap', {
				enableMapClick: false,
			});
			let point = new BMap.Point(120.65523, 28.014695);

			map.setMapType(BMAP_HYBRID_MAP);
			map.centerAndZoom(point, 15);
			// 地图比例尺
			map.addControl(
				new BMap.ScaleControl({
					anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
				})
			);
			// 鼠标滑动缩放
			map.enableScrollWheelZoom(true);
			// console.log(this.$refs.overlay0[0])
			// this.$refs.overlay0[0].draw()
		},
	},
};
</script>
<style lang="less" scoped>
#precedure {
	padding: 0.1rem 0.2rem;
	padding-bottom: 50px;
	position: relative;
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.block {
			border-radius: 10px;
			padding: 0.76rem 0.46rem;
			background-color: #fff;
			width: 7.08rem;
			box-sizing: border-box;
			.f1 {
				font-size: 0.28rem;
				color: #030303;
			}
			.f2 {
				font-weight: bold;
				font-size: 0.32rem;
				color: #000000;
			}
			.f3 {
				font-weight: 400;
				font-size: 0.32rem;
				color: #000000;
				margin-bottom: 0.44rem;
				text-align: center;
			}
			.f4 {
				font-weight: bold;
				font-size: 0.32rem;
				color: #000000;
				margin-bottom: 0.22rem;
			}
			.f5 {
				font-weight: bold;
				font-size: 0.32rem;
				color: #f18800;
				margin-bottom: 0.22rem;
			}
			.button1 {
				background: #2947ff; /* height: 0.27rem; */
				/* width: 2rem; */
				position: relative;
				padding: 0.34rem 0.6rem;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 0.32rem;
				color: #ffffff;
				display: inline-block;
				border-radius: 40px;
				white-space: nowrap;
			}
			.button2 {
				background: rgba(225, 225, 225, 1); /* height: 0.27rem; */
				/* width: 2rem; */
				position: relative;
				padding: 0.34rem 0.6rem;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 0.32rem;
				color: rgba(91, 91, 91, 1);
				display: inline-block;
				border-radius: 40px;
				white-space: nowrap;
			}
			.button3 {
				background: #fff; /* height: 0.27rem; */
				/* width: 2rem; */
				border: 1px solid #2947ff;
				position: relative;
				padding: 0.34rem 0.6rem;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 0.32rem;
				color: rgba(41, 71, 255, 1);
				display: inline-block;
				border-radius: 40px;
				white-space: nowrap;
			}
			.block2 {
				width: 6.22rem;
				background: #f8f8f8;
				border-radius: 10px;
				padding: 0.6rem 0.42rem;
				.item {
					padding-bottom: 0.2rem;
					border-bottom: 1px dashed #eee;
					margin-top: 0.2rem;
				}
			}
			.block4 {
				width: 6.22rem;
				background: #f8f8f8;
				border-radius: 10px;
				padding: 0.2rem 0.4rem;
				margin-top: 0.2rem;
			}
			.block3 {
				width: 100%;
				.item {
					padding-bottom: 0.2rem;
					border-bottom: 1px dashed #eee;
					margin-top: 0.2rem;
				}
			}
		}
	}
	.wrap {
		padding: 0.5rem;
		background: #fff;
		margin-bottom: 0.44rem;
		margin-top: 0.5rem;
		.text1 {
			background: #eeeeee;
			margin-right: 0.12rem;
			border-radius: 20px;
			font-size: 0.24rem;
			color: #000;
			padding: 0.18rem 0.24rem;
			white-space: nowrap;
		}
	}
	.list {
		height: 9rem;
		overflow: scroll;

		.item {
			padding-bottom: 0.2rem;
			border-bottom: 1px dashed #eee;
			margin-top: 0.2rem;
			.f1 {
				font-size: 0.24rem;
				color: #3d3d3d;
			}
			.f2 {
				font-weight: bold;
				font-size: 0.24rem;
				color: #2947ff;
			}
		}
	}
	.button1 {
		background: #2947ff; /* height: 0.27rem; */
		/* width: 2rem; */
		position: relative;
		padding: 0.18rem 0.36rem;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 0.24rem;
		color: #ffffff;
		display: inline-block;
		border-radius: 20px;
	}
	.button2 {
		background: #eeeeee; /* height: 0.27rem; */
		/* width: 2rem; */
		position: relative;
		padding: 0.18rem 0.36rem;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 0.24rem;
		color: #5b5b5b;
		display: inline-block;
		border-radius: 20px;
	}

	.bottom {
		width: 7.08rem;
		background: #ffffff;
		box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05);
		border-radius: 30px;
		box-sizing: border-box;
		padding: 0.2rem 0.6rem;
		font-weight: bold;
		font-size: 0.32rem;
		color: #000000;
		.right {
			height: 0.47rem;
			width: 0.47rem;
		}
	}
	.center {
		width: 100%;
		height: 0.75rem;
		position: relative;
		margin-top: 0.2rem;
		margin-bottom: 0.2rem;

		.icon1 {
			width: 0.32rem;
			height: 0.33rem;
			position: absolute;
			left: 0.3rem;
			top: 0.2rem;
		}
		.input {
			padding-left: 0.8rem;
			border-radius: 38px;
			box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05);
			width: 100%;
			height: 100%;
			background: #ffffff;
			border: none;
		}
		.button {
			position: absolute;
			right: 0.4rem;
			top: 0.2rem;
			color: rgba(41, 71, 255, 1);
		}
	}
}
</style>